<template>
  <div>
    <s-table ref="table" size="default" :rowKey="(record, index) => index" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="createTime" slot-scope="text, record">
        {{ text | utc2beijing }}
        &nbsp;
        <a-tag color="cyan" v-if="record.source == 'BOX'">BOX</a-tag>
        <a-tag color="orange" v-if="record.source == 'MALL'">微商城</a-tag>
      </span>
      <span slot="info" slot-scope="text, record">
        <template>
          <div class="goods">
            <img :src="record.imgUrl ? record.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" alt="" @click="showGoodInfo(record)" />
            <div>
              <a-tooltip>
                <template slot="title"> 【{{ record.productBrand }}】{{ record.productName }} </template>
                <h3 class="title">【{{ record.productBrand }}】{{ record.productName }}</h3>
              </a-tooltip>

              <p class="detail">
                <span>¥{{ record.productPrice }}</span
                ><br />
                <!-- <span>{{ record.season }}</span
                ><span>{{ record.bigClass }} / {{ record.smallClass }}</span
                ><span>{{ record.element }}</span> -->
                <span>颜色：{{ record.productColor }}</span
                ><span>尺码：{{ record.productSize }}</span>
              </p>
            </div>
          </div>
        </template>
      </span>
    </s-table>
    <GoodInfoModal ref="goodInfoModal"></GoodInfoModal>
  </div>
</template>
<script>
import { STable } from '../../../components'
import { getCartByUnionId } from '@/api/box/member'
import GoodInfoModal from '../../../components/GoodInfoModal'
const columns = [
  {
    title: '加购时间',
    dataIndex: 'createTime',
    width: 250,
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '商品',
    dataIndex: 'info',
    width: 500,
    scopedSlots: { customRender: 'info' }
  },
  {
    title: '款号',
    dataIndex: 'productCode'
  },
  {
    title: '数量',
    dataIndex: 'productQuantity'
  }
]
export default {
  components: {
    STable,
    GoodInfoModal
  },
  data() {
    this.columns = columns
    return {
      unionId: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // showQuickJumper: true
      },
      loadData: parameter => {
        let data = {
          page: parameter,
          requestData: {
            unionId: this.unionId
          }
        }
        return getCartByUnionId(data).then(res => {
          if (res.code == 0) {
            return {
              data: res.data,
              page: res.page
            }
          } else {
            return {
              data: [],
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              }
            }
          }
        })
      }
    }
  },
  created() {
    this.unionId = this.$route.params.id
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    showGoodInfo(record) {
      this.$refs.goodInfoModal.show(record.productId, record.outId)
    }
  }
}
</script>
<style lang="less" scoped>
.goods {
  display: flex;
  img {
    min-width: 80px;
    height: 80px;
    object-fit: scale-down;
    border: 1px dashed #cdcdcd;
    margin-right: 12px;
    cursor: pointer;
    background: #fff;
  }

  div {
    .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 350px;
    }
    .detail {
      color: #666;
      span {
        display: inline-block;
        margin-left: 12px;
      }
    }
  }
}
</style>
